import { VxeUI } from 'vxe-pc-ui';
import { ElLink, ElIcon, ElButton } from 'element-plus';
import { View } from '@element-plus/icons-vue';
import { h } from 'vue';

VxeUI.renderer.add('RaRichTextDialogRender', {
  renderDefault(renderOpts, params) {
    const { row, column } = params;
    const { props = {} } = renderOpts;
    const field = column.field;
    const richTextContent = row[field];

    const {
      dialogTitle = '详细信息',
      dialogWidth = '60%',
      emptyText = '-',
    } = props;

    if (!richTextContent) {
      return <span>{emptyText}</span>;
    }

    const handleShowDialog = () => {
      VxeUI.modal.open({
        title: dialogTitle,
        width: dialogWidth,
        height: '80%',
        mask: false,
        maskClosable: true,
        escClosable: true,
        showFooter: true,
        showConfirmButton: true,
        slots: {
          // 默认插槽，用于定义弹窗主体内容
          default: () =>
            h('div', {
              style: {
                overflow: 'auto',
                padding: '16px',
                borderRadius: '6px',
                // lineHeight: '1.6',
                // fontSize: '14px',
                // border: '1px solid #e4e7ed',
                // backgroundColor: '#fafafa',
              },
              innerHTML: richTextContent,
            }),
          // footer 插槽，用于定义页脚
          footer: ({ $modal }) => [
            h(
              ElButton,
              {
                onClick: () => $modal.close(),
              },
              () => '关闭',
            ),
          ],
        },
      });
    };

    return (
      <ElLink
        type="primary"
        underline="never"
        onClick={handleShowDialog}
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '4px',
          cursor: 'pointer',
        }}
        {...props}
      >
        <ElIcon size={14}>
          <View />
        </ElIcon>
        <span>查看内容</span>
      </ElLink>
    );
  },
});

export default 'RaRichTextDialogRender';
